﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Widget._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Test StoreLocator</title>

    <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAZBe7uHI90ESk2XAmWRL3RxR6u04U0tImA3bfwZ3-HKdEno7z2xRk2YE6OkudtBX5qy0vLrgbf1DUCg"></script>

    <script type="text/javascript">
        google.load("jquery", '1.3');
        google.load("maps", "2.x");
    </script>

    <script type="text/javascript" charset="utf-8">
        var map = null;
        var geocoder = null;
        $(document).ready(function() {
            geocoder = new GClientGeocoder();
            map = new GMap2($("#map").get(0));
            var burnsvilleMN = new GLatLng(44.797916, -93.278046);
            map.setCenter(burnsvilleMN, 3);
            
            function showAddress(address,zoom) {
                if (geocoder) {
                    geocoder.getLatLng(
                        address,
                        function(point) {
                            if (!point) {
                                alert(address + " not found");
                            } else {
                                map.setCenter(point, zoom );
                                var marker = new GMarker(point);
                                map.addOverlay(marker);
                                marker.openInfoWindowHtml(address);
                            }
                        }
                    );
                }
            }
            
            $("#btnFind").click(function() {
            showAddress($("#inputField").val(), parseInt($("#radiusDropdown").val()));
            });                                         
            
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "WebService/StoreService.asmx/GetStoresInfo",
                //data: "{}",
                dataType: "xml",
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    $("#output").append(XMLHttpRequest.responseText + "<br />TextStatus: " + textStatus + "<br />ErrorThrown: " + errorThrown);
                },
                success: function(xml) {
                // hier wordt de xml uitgelezen
                    $(xml).find("store").each(function() {
                        var storename = $(this).find("name").text();
                        var latitude = $(this).find("latitude").text();
                        var longitude = $(this).find("longitude").text();
                        var point = new GLatLng(latitude, longitude);
                        var marker = new GMarker(point);
                        var address = $(this).find("addressline1").text();
                        var city = $(this).find("city").text();
                        var state = $(this).find("state").text();
                        var markerManager = new GMarkerManager(map);
                        
                        
                        GEvent.addListener(marker, "click", function() {
                            var myHtml = "Store name: " + storename
                            + "<br/> Address: " + address
                            + "<br/> City: " + city
                            + "<br/> State: " + state
                           + "<br/><a href=\"http://maps.google.nl/maps?saddr=" + $("#inputField").val() + "&daddr=" + address + " " + city + " " + state + "\">Toon Route</a>";
                            map.openInfoWindowHtml(point, myHtml);
                        });
                        
                        markerManager.addMarker(marker,5,15);


                    });
                    map.setUIToDefault();

                }
            });
        });


        


    </script>

    <style type="text/css" media="screen">
        #map
        {
            float: left;
            width: 500px;
            height: 500px;
        }
        #message
        {
            position: absolute;
            padding: 10px;
            background: #555;
            color: #fff;
            width: 75px;
        }
        #list
        {
            float: left;
            width: 200px;
            background: #eee;
            list-style: none;
            padding: 0;
        }
        #list li
        {
            padding: 10px;
        }
        #list li:hover
        {
            background: #555;
            color: #fff;
            cursor: pointer;
            cursor: hand;
        }
    </style>
</head>
<body>
    <form runat="server" >
    <p>
    <input type="text" id="inputField" size="60" name="address"  />
    <select name="radius" id="radiusDropdown">
        <option value="14">1 km</option>
        <option value="13">2 km</option>
        <option value="12" selected>5 km</option>
        <option value="11">10 km</option>
        <option value="10">20 km</option>
        <option value="9">50 km</option>
        <option value="8">100 km</option>
    </select>    
    <input type="button" id="btnFind" value="Find!" />
    </p>
    <div id="map">
    </div>
    <ul id="list">
    </ul>
    <div id="output">
    </div>
    <div id="message" style="display: none;">
        Test text.
    </div>
    </form>
    
</body>
</html>
